<template>
	<div>
		<div flex style="height: 100%;">
			<base-layout title="数据字典分类" style="width: 260px;" :buttonList="classifyButtonlist" @onFuncBtn="classifyFuncBtn"
				:defaultButtonSwitch="false" ref="treeLayout">
				<div slot="main" style="height: 100%;">
					<div style="overflow: auto;height: 100%;border-right: .0625rem solid #dfe6ec;">
						<div v-for="(item, index) in classifyList" :key="index" flex class="classifyBox"
							@click="listClick(item)" :class="{ 'active': item.value == ddk_DataDicKindID }">
							<i class="el-icon-folder"></i>
							<div class="classifyName" flex>
								<p>{{ item.name }}</p>
								<p>({{ item.value }})</p>
							</div>
						</div>
					</div>
				</div>
			</base-layout>
			<base-layout title="数据字典明细" style="flex:1;" :isPage='true' ref="detailed" @pageChange="pageChange"
				@onFuncBtn="detailedFuncBtn">
				<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
					<base-table ref="personCustomtable" :border="true" :showIndex="false" :slotrow="true"
						@radioChange="radioChange" :tabLoading.sync="detailedLoading" :tableHeight="tableHeight"
						:tableData="tableData" :tableColumn="tableColumn">
					</base-table>
				</div>
			</base-layout>
		</div>
		<!-- 数据字典分类弹窗 -->
		<base-dialog :dialogVisible.sync="classifyDialog" :closeModal="false" :footerShow="true" style="overflow: hidden;"
			:title="ddk_DataDicKindID ? '编辑类别' : '新增类别'" width="30%" top="10vh" @handleConfirmClick="classifyConfirmClick">
			<div v-for="(item, index ) in classifyFromList" :key="index" flex="cross:center"
				style="margin-bottom: .9375rem;">
				<label style="width: 5.625rem;text-align: right;margin-right: .9375rem;">{{ item.labelName }}</label>
				<el-input style="flex:1" v-model="classifyFrom[item.propName]"
					:type="item.typeName ? item.typeName : 'text'"></el-input>
			</div>
		</base-dialog>
		<!-- 数据字典列表弹窗 -->
		<base-dialog :dialogVisible.sync="detailedDialog" :closeModal="false" :footerShow="false" title="新增类别" width="45%"
			top="10vh">
			<base-form ref="detailedCustomForm" :formRow="formRow" :isFunBtn="true" @onSelect="getFromSelect"
				:spanWidth="spanWidth" @onSubmit="getSubmit">
			</base-form>
		</base-dialog>
	</div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout"
import baseTree from "@/components/base/BaseMenuTree"
import baseForm from "@/components/base/baseNewForm"
import baseDialog from "@/components/base/BaseNewDialog"
import baseTable from "@/components/base/baseTable"
import configData from "./configData"
import {
	dataDictionaryGetTypeList,
	dataDictionarySaveTypeData,
	dataDictionaryGetTypeData,
	dataDictionaryDelTypeData,
	dataDictionaryGetBillList,
	dataDictionaryGetBillData,
	dataDictionarySaveData,
	DataDictionaryDelDatat
} from '@/api/apis/dataDictionary'
export default {
	components: {
		baseDialog,
		baseLayout,
		baseTree,
		baseForm,
		baseTable
	},
	data() {
		return {
			radioIndex: false,
			radioId: false,
			spanWidth: '3.125rem',
			publicMainColor: '#f8f8f8 ', //背景颜色——用于tree
			//数据字典分类按钮列表
			classifyButtonlist: [{
				icon: 'el-icon-plus'
			},
			{
				icon: 'el-icon-edit'
			},
			{
				icon: 'el-icon-delete',
				type: 'danger'
			},
			],
			classifyList: [], //数据字典分类列表
			// 数据字典分类弹窗
			classifyDialog: false,
			classifyFrom: {
				Ddk_DataDicKindName: null,
				Ddk_DataDicKindCode: null,
				Ddk_Sort: null,
				Ddk_Remark: null
			},
			// 数据字典分类form
			classifyFromList: [{
				labelName: '分类名称',
				propName: 'ddk_DataDicKindName'
			},
			{
				labelName: '分类顺序',
				propName: 'ddk_Sort'
			},
			{
				labelName: '分类编码',
				propName: 'ddk_DataDicKindCode'
			},
			{
				labelName: '备注',
				propName: 'ddk_Remark',
				typeName: 'textarea'
			},
			],
			// 数据字典分类id
			ddk_DataDicKindID: '',
			//数据字典明细按钮列表
			// detailedButtonlist: [{
			// 	icon: 'el-icon-plus',
			// 	menuName: '新增'
			// },
			// {
			// 	icon: 'el-icon-edit',
			// 	menuName: '编辑'
			// },
			// {
			// 	icon: 'el-icon-delete',
			// 	menuName: '删除',
			// 	type: 'danger'
			// },
			// ],
			// 分页数据
			pageModel: {
				limit: 20,
				page: 1,
				Sequence: '',
				SequenceName: ''
			},
			// 表格高度
			// tableHeight: 'calc(100vh - 14.1875rem)',
			// 表格loading
			detailedLoading: false,
			tableData: [],
			tableColumn: configData.tableColumn,
			formRow: configData.formRow,
			detailedDialog: false,
			Ddd_DicKindID: '',
			ruleForm: {
				ddd_DicDetailsID: '',
				ddd_DicDetailsName: '',
				ddd_DicDetailsCode: '',
				ddd_DicDetailsSort: '',
				ddd_DicDetailsRemark: '',
			}
		}
	},
	watch: {
		classifyDialog: {
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				if (newV == false) {
					for (let i in this.classifyFrom) {
						this.classifyFrom[i] = ''
					}
				}
			}
		},
		detailedDialog: {
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				if (newV == true) {
					this.formRow[0].elCol[0].options = []
					this.classifyList.forEach(el => {
						let arr = {
							value: el.value,
							label: el.name
						}
						this.formRow[0].elCol[0].options.push(arr)
					})
					this.$nextTick(() => {
						this.$refs.detailedCustomForm.getField('ddd_DicKindID', this.ddk_DataDicKindID)
					})
					// this.formRow[0].elCol[0].options = this.classifyList
				} else {
					this.$nextTick(() => {
						this.$refs.detailedCustomForm.choiceAssignment({})
					})
				}
			}
		},
	},
	mounted() {
		this.initPage()
	},
	methods: {
		// 页面初始化
		initPage() {
			this.getClassfyList()
			// this.getListButton()
		},
		// 获得列表按钮
		getListButton() {
			let params = {
				id: this.$route.meta.id
			}
		},
		//获取左侧数据字典分类列表
		async getClassfyList() {
			this.$refs.treeLayout.loading = true
			setTimeout(() => {
				this.$refs.treeLayout.loading = false
			}, 3000)
			let res = await dataDictionaryGetTypeList()
			if (res.code == 1) {
				this.classifyList = res.data[0]
				this.tableData = []
				this.$refs.personCustomtable.clearSelect()
				this.$refs.personCustomtable.clearRadioIndex()
				// this.$refs.personCustomtable.pageClear()
				this.$refs.detailed.setPageTotal(0)
				this.$refs.detailed.pageClear()
				this.$refs.treeLayout.loading = false
			}
		},
		// 获取数据字典分类详情
		async getClassfyDetail() {
			let params = {
				id: this.ddk_DataDicKindID
			}
			let res = await dataDictionaryGetTypeData(params)
			if (res.code == 1) {
				this.classifyFrom = res.data[0]
				this.classifyDialog = true
			}
		},
		// 删除数据字典分类
		async delClass() {
			let params = {
				id: this.ddk_DataDicKindID
			}
			let res = await dataDictionaryDelTypeData(params)
			if (res.code == 1) {
				this.$vmNews('删除', 'success')
				this.ddk_DataDicKindID = ''
				this.getClassfyList()
			}
		},
		// 获取数据字典列表
		async getTableList() {
			this.radioIndex = false
			this.$refs.personCustomtable.clearSelect()
			this.$refs.personCustomtable.clearRadioIndex()
			this.detailedLoading = true
			let params = {
				KindId: this.ddk_DataDicKindID,
				...this.pageModel
			}
			let res = await dataDictionaryGetBillList(params)
			if (res.code == 1) {
				this.tableData = res.data[1]
				this.$refs.detailed.setPageTotal(res.data[0])
			}
			this.detailedLoading = false
		},
		// 获取数据字典分类详情
		async getDetailedDetail(id) {
			let params = {
				id: id
			}
			let res = await dataDictionaryGetBillData(params)
			if (res.code == 1) {
				this.detailedDialog = true
				this.$nextTick(() => {
					this.$refs.detailedCustomForm.choiceAssignment(res.data[0])
				})
			}
		},
		// 单选
		radioChange(val) {
			this.radioIndex = val.index
			this.radioId = val.ddd_DicDetailsID
		},
		// 点击左侧
		listClick(item) {
			this.$nextTick(() => {
				this.$refs.detailed.pageClear()
			})
			this.ddk_DataDicKindID = item.value
			// this.Ddd_DicDetailsName = item.name
			this.Ddd_DicKindID = item.value
			this.radioId = false
			this.getTableList()

		},
		// 弹窗点击确定
		async classifyConfirmClick() {
			let params = {
				...this.classifyFrom
			}
			if (!this.ddk_DataDicKindID) {
				params.ddk_DataDicKindID = 0
			}
			let res = await dataDictionarySaveTypeData({
				dataMain: params
			})
			if (res.code == 1) {
				this.$vmNews('保存成功', 'success')
				this.ddk_DataDicKindID = ''
			}
			this.classifyDialog = false
			this.getClassfyList()
		},
		// 数据字典分类按钮点击事件
		classifyFuncBtn(item) {
			if (item.icon == 'el-icon-plus') {
				this.classifyDialog = true
			}
			if (item.icon == 'el-icon-edit') {
				if (!this.ddk_DataDicKindID) {
					this.$vmNews('请选择需要编辑的对象', 'warning')
					return
				}
				this.getClassfyDetail()
			}
			if (item.icon == 'el-icon-delete') {
				if (!this.ddk_DataDicKindID) {
					this.$vmNews('请选择需要删除的对象', 'warning')
					return
				}
				this.$confirm('确认删除该分类吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.delClass()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		// 数据字典本列表按钮点击事件
		detailedFuncBtn(item) {
			if (item.icon == 'el-icon-plus') {
				this.detailedDialog = true
				// this.ddk_DataDicKindID = ''
			}
			if (item.icon == 'el-icon-edit') {
				if (this.radioIndex === false) {
					this.$vmNews('请选择需要编辑的对象', 'warning')
					return
				}

				this.getDetailedDetail(this.radioId)
			}
			if (item.icon == 'el-icon-delete') {
				if (this.radioIndex === false) {
					this.$vmNews('请选择需要删除的对象', 'warning')
					return
				}
				this.$confirm('确认删除该内容吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableDel(this.radioId)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		// 页面改变
		pageChange(model) {
			this.pageModel.page = model.page
			this.pageModel.limit = model.limit
			this.getTableList()
		},
		// 提交
		async getSubmit(ruleForm) {

			let params = {
				...ruleForm
			}
			params.ddd_DicDetailsID = params.ddd_DicDetailsID ? params.ddd_DicDetailsID : 0
			let res = await dataDictionarySaveData({
				dataMain: params
			})
			if (res.code == 1) {
				this.$vmNews('保存成功', 'success')
				for (let i in this.ruleForm) {
					this.ruleForm[i] = ''
				}
				this.detailedDialog = false
				this.$refs.detailed.setPageNum(1)
				this.pageModel.page = 1
				this.radioId = false
				this.radioIndex = false
				this.getTableList()
			}
		},
		async tableDel(id) {
			let params = {
				id: id
			}
			let res = await DataDictionaryDelDatat(params)
			if (res.code == 1) {
				this.$vmNews('删除成功', 'success')
				this.Ddd_DicKindID = ''
				this.pageModel.page = 1
				this.$refs.detailed.setPageNum(1)
				this.getTableList()
			}
		},
		getFromSelect(val, index, indexRow) {
			this.Ddd_DicKindID = val
		}
	}
}
</script>

<style lang="scss" scoped>
$activeColor: var(--bg-color, #55aaff);

.classifyBox {
	margin: .3125rem 0;
	padding: .3125rem 1.25rem;
	font-size: .875rem;

	.classifyName {
		margin-left: .3125rem;

	}

	.classifyName:hover {
		color: $activeColor;
		cursor: pointer;
		text-decoration: underline;
	}
}

.classifyBox.active {
	color: $activeColor;
}

.lassifyName:hover {
	cursor: pointer;
	color: aqua;
	text-decoration: underline;
}
</style>
